<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>短信工具</span>
      </div>

      <el-tabs v-model="activeName">
        <el-tab-pane label="百度SMS短信通" name="first">
          <el-form
            :model="sendForm"
            ref="form"
            :rules="rules"
            label-width="100px"
            style="width: 70%; margin: auto"
          >
            <el-form-item label="短信接收人" prop="toSmsPhone">
              <el-input
                v-model="sendForm.toSmsPhone"
                placeholder="请输入短信收件手机号"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="发送内容" prop="content">
              <el-input
                v-model="sendForm.content"
                placeholder="请输入发送内容"
                type="textarea"
                :rows="5"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-s-promotion"
                size="mini"
                @click="submitForm"
                >发 送</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="reset"
                >重 置</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="说明" name="second">
          <el-collapse>
            <el-collapse-item title="百度SMS短信通" name="1">
              <div>官网：http://sms.webchinese.cn/</div>
              <div>
                GBK编码发送接口地址：
                http://gbk.api.smschinese.cn/?Uid=本站用户名&Key=接口安全秘钥&smsMob=手机号码&smsText=验证码:8888
              </div>
              <div>
                UTF-8编码发送接口地址：
                http://utf8.api.smschinese.cn/?Uid=本站用户名&Key=接口安全秘钥&smsMob=手机号码&smsText=验证码:8888
              </div>
              <div>
                获取短信数量接口地址(UTF8)：
                http://www.smschinese.cn/web_api/SMS/?Action=SMS_Num&Uid=本站用户名&Key=接口安全秘钥
              </div>
              <div>
                获取短信数量接口地址(GBK)：
                http://www.smschinese.cn/web_api/SMS/GBK/?Action=SMS_Num&Uid=本站用户名&Key=接口安全秘钥
              </div>
            </el-collapse-item>
            <el-collapse-item title="反馈 Feedback" name="2">
              <div>
                控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
              </div>
              <div>
                页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { send } from '@/api/tool/sms'

export default {
  name: 'Sms',
  data() {
    return {
      activeName: 'first',
      // 表单参数
      sendForm: {
        toSmsPhone: undefined,
        content: undefined
      },
      // 表单校验
      rules: {
        toSmsPhone: [
          { required: true, message: '收件地址不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '邮件内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    /** 重置按钮操作 */
    reset() {
      this.sendForm = {
        toSmsPhone: undefined,
        content: undefined
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          send(this.sendForm).then((response) => {
            this.$modal.msgSuccess(response.msg)
            this.reset()
          })
        }
      })
    }
  }
}
</script>
